$zindex-ControlsFooterMenu: 3;
$zindex-ControlsFooter: 2;

// hide the button that opens the embed menu on mobile
&.GrapherComponentNarrow .ShareMenu .embed {
    display: none;
}

.ShareMenu {
    $hover-fill: $gray-10;
    $active-fill: $blue-20;

    position: absolute;
    bottom: $timelineHeight + 8px;
    text-align: left;
    background: #fff;
    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.06);
    padding: 4px 0;
    z-index: $zindex-ControlsFooterMenu;
    border-radius: 4px;

    h2 {
        font-family: $sans-serif-font-stack;
        margin: 0;
        font-size: 12px;
        font-weight: 700;
        color: $light-text;
        height: 28px;
        line-height: 28px;
        padding: 0 16px;
    }

    a {
        font-size: 13px;
        display: flex;
        align-items: center;
        text-align: left;
        color: $dark-text;
        text-decoration: none;
        white-space: normal;
        padding: 12px 16px;
        letter-spacing: 0.01em;

        &:hover {
            background-color: $hover-fill;
        }

        &:active {
            background-color: $active-fill;
            color: $active-text;
        }

        > .icon {
            margin-right: 6px;
            flex: 0 0 16px;
        }
    }
}
